﻿@page "/selects"

<h3>Select 选择器</h3>

<h4>当选项过多时，使用下拉菜单展示并选择内容</h4>

<Block Title="Select 下拉选择框" Introduction="提供各种颜色的下拉选择框" CodeFile="select.1.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Select 禁用下拉框" Introduction="选择器不可用状态" CodeFile="select.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Select>
            </div>
        </div>
    </div>
</Block>

<Block Title="Select 双向绑定" Introduction="通过 <code>Select</code> 组件绑定 <code>Model.Name</code> 属性，改变下拉框选项时，文本框内的数值随之改变。" CodeFile="select.3.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Primary" Items="@Items" @bind-Value="@Model.Name"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput readonly @bind-Value="@Model.Name" />
            </div>
        </div>
    </div>
</Block>

<Block Title="Select 级联绑定" Introduction="通过选择第一个下拉框不同选项，第二个下拉框动态填充内容。" CodeFile="select.4.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnCascadeBindSelectClick"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" @ref="SubSelect" Color="Color.Success"></Select>
            </div>
        </div>
    </div>
</Block>

<Block Title="Select 客户端验证" Introduction="下拉框未选择时，点击提交按钮时拦截。" CodeFile="select.5.txt">
    <ValidateForm class="form-inline" Model="@BindModel">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TItem="string" Color="Color.Primary" @bind-Value="@BindModel.Name">
                    <RequiredValidator ErrorMessage="请选择一个城市" />
                </Select>
            </div>
            <div class="form-group col-12 col-sm-6 align-items-end">
                <Button>提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="分组" Introduction="备选项进行分组展示" CodeFile="select.6.txt">
    <div class="row">
        <div class="form-group col-12 col-sm-6">
            <Select TItem="string" Color="Color.Primary" Items="@GroupItems">
            </Select>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
